<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="keywords" content="首页,18001010321,王梓豪">
    <title>首页18001010321</title>
    <script src="../iconfont/font_2232293_glnw4va62bs/iconfont.js"></script>
    <link rel="stylesheet" href="../iconfont/font_2232293_glnw4va62bs/iconfont.css">
    <link rel="stylesheet" href="../iconfont/bottom_navi/iconfont.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            min-width: 320px;
        }
        img {
            border: none;
            display: block;
        }
        a {
            text-decoration: none;
            color: #000;
        }
        ul,ol{
            list-style: none;
        }
        .focus {
            width: 100%;
            height: 41vw;
            position: relative;
            overflow: hidden;
        }
        .focus img {
            width: 100%;
            height: 41vw;
        }
        .focus ol {
            position: absolute;
            bottom: 5px;
            right: 37%;
        }
        .focus ol li {
            transition: .1s;
            border-radius: 2px;
            margin-right: 7px;
            float: left;
            width: 10px;
            height: 2px;
            background-color: rgba(200, 200, 200, .7);
            list-style: none;

        }
        .focus ol .current{
            background-color: #fff;
        }
        .focus ul {
            margin-left: -100%;
            display: flex;
            width: 700%;
        }
        .focus ul li {
            width: 100%;
        }

        .all {
            /* min-width: 320px; */
            overflow: hidden;
            position: relative;
        }
        .icon {
            margin-left: 17px;
            margin-top: 7px;
            width: 39px;
            height: 45px;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
        .icon1 {
            margin-top: 9px;
            position: absolute;
            right: 75px;
            width: 43px;
            height: 43px;
        }
        .icon2 {
            margin-top: 11.3px;
            position: absolute;
            right: 25px;
            width: 39px;
            height: 39px;
        }
        .duihua {
            width: 3.3vw;
            height: 3.3vw;
        }
        .main {
            margin: 0 auto;
            margin-top: 111px;
        }
        .li_head {
            line-height: 26px;
            font-size: 19px;
            height: 3rem;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .navi {
            position: fixed;
            top: 0;
            width: 100%;
            height: 110px;
            background-color: #fff;
            border-bottom: 1px solid #ccc;
            z-index: 3;
        }
        .navi_top {
            position: relative;
            height: 50px;
            background-color: #fff;
            display: flex;
        }
        .navi_top input{
            color: rgb(159, 172, 181);
            position: absolute;
            top: 11px;
            left: 33px;
            outline: none;
            border: none;
            font-size: 17px;
            background-color: rgb(240, 243, 249);
            width: 100px;
        }
        .search{
            position: relative;
            margin-left: 17px;
            margin-top: 13px;
            border-radius: 60px;
            height: 40px;
            width: 37vw;
            background-color: rgb(240, 243, 249);
            border: none;
        }
        .fangdajing {
            position: absolute;
            width: 19px;
            height: 18.6px;
            left: -6px;
            top: 6px;
            z-index: 2;
            color: rgb(140, 140, 140);
        }
        .navi_bottom{
            height: 60px;
            background-color: #fff;
        }
        .navi_bottom ul {
            display: flex;
        }
        .navi_bottom ul li {
            width: 30%;
            text-align: center;
            line-height: 60px;
            color: rgb(140, 140, 140);
            font-size: 19px;
        }
        .navi_bottom ul li.curr {
            text-decoration: underline;
            color: #000;
            font-size: 21px;
            font-weight: bold;
        }

        .update_top{
            margin-top: 33px;
            height: 10vw;
            position: relative;
            display: flex;
        }
        .update_top a {
            position: absolute;
            right: 5vw;
            color: rgb(149, 155, 161);
        }
        .update_top h3 {
            position: absolute;
            left: 17px;
            font-size: 17px;
        }
        .update_bottom {
            margin-bottom: 100px;
            height: 140px;
            overflow: hidden;
            width: 100%;
        }
        .update_bottom ul{
            margin-top: 1vw;
            margin-left: 4vw;
            width: 200%;
            display: flex;
        }
        .update_bottom ul li {
            box-shadow: 2px 2px 1px 2px rgb(243, 243, 243);
            margin-left: 5px;
            margin-right: 10px;
            width: 130px;
            height: 130px;
        }
        .one {
            height: 50%;
            width: 100%;
            text-align: center;
        }
        .two {
            height: 50%;
            width: 100%;
        }
        .gaidong {
            margin-top: 17px;
            margin-right: 18px;
        }
        .two p {
            font-size: 20px;
            width: 130px;
            text-align: center;
        }
        .two span {
            display: block;
            font-size: 15px;
            width: 130px;
            text-align: center;
            margin-top: 4px;
            color: rgb(140, 140, 140);
        }
        .bottom_navi{
            border-top: 1px solid #eee;
            height: 65px;
            width: 100%;
            background-color: #fff;
            position: fixed;
            bottom: 0;
        }
        .bottom_navi ul {
            display: flex;
        }
        .bottom_navi ul li {
            color: rgb(149, 155, 161);
            height: 100%;
            width: 30%;
        }
        .bottom_navi ul li a{
            color: rgb(149, 155, 161);
            height: 100%;
            width: 30%;
        }
        .bottom_navi ul li.bcurr{
            color: #000;
        }
        .tubiao{
            line-height: 40px;
            text-align: center;
            height: 40px;
        }
        .naviText {
            font-size: 14px;
            height: 25px;
            text-align: center;
        }
        .tubiao span {
            font-size: 30px;
        }
        
        .list_ul {
      width: 94%;
      margin-left: auto;
    }
    .list_ul li {
      display: flex;
      margin-top: 20px;
    }
    .list_ul li>div {
      width: 45vw;
    }
    .list_ul li img {
      margin-left: auto;
      width: 45vw;
      height: 25vw;
    }
    .list_ul li h3{
      font-weight: normal;
      font-size: 5vw;
      line-height: 7.5vw;
    }
    .bottom {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin-top: 4vw;
      font-size: 3vw;
    }
    .icon-duihuakuang {
      font-size: 3vw;
    }
    .bottom>span:nth-child(1){
      background-color: rgb(223, 247, 248);
      color: rgb(74, 188, 199);
    }
    .bottom span:nth-child(2){
      margin-left: 2vw;
      color: rgb(162, 171, 176);
    }
    .bottom span:nth-child(3){
      margin-left: 2vw;
      color: rgb(162, 171, 176);
    }
    .li_head {
      height: 15vw;
    }
    </style>
</head>
<body>
    <div class="all">
        <div class="navi">
            <div class="navi_top">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liebiao"></use>
                </svg>
                <div class="search">
                    <svg class="icon fangdajing" aria-hidden="true">
                        <use xlink:href="#icon-fangdajing"></use>
                    </svg>
                    <input type="text" value="每日一笑">
                </div>
                <svg class="icon icon1" aria-hidden="true">
                    <use xlink:href="#icon-fenlei-yingxionglianmeng"></use>
                  </svg>
                <svg class="icon icon2" aria-hidden="true">
                    <use xlink:href="#icon-chuang"></use>
                </svg>
            </div>
            <div class="navi_bottom">
                <ul>
                    <li>关注</li>
                    <li class="curr">推荐</li>
                    <li>赛事</li>
                    <li>季前赛</li>
                    <li>云顶</li>
                </ul>
            </div>
        </div>
        <div class="main">
            <div class="focus">
                <ul>
                    <!-- <li><img src="../images/星神.jpg"></li>-->
                </ul>
                <ol>
                    
                </ol>
            </div>
            <ul class="list_ul">
                <!-- <li>
                    <div>
                      <h3>女帝无双事件即将开启</h3>
                      <div class="bottom">
                        <span>LOL</span>
                        <span>英雄联盟官方</span>
                        <span>
                          <span class="iconfont icon-duihuakuang"></span>
                          2920
                        </span>
                      </div>
                    </div>
                    <img src="../images/决赛.jpg">
                </li> -->
              </ul>
            <div class="update_top">
                <h3>10.24版本更新总览</h3>
                <a href="#">查看详情 ></a>
            </div>
            <div class="update_bottom">
                <ul>
                    <li>
                        <div class="one">
                            <svg class="icon gaidong" aria-hidden="true">
                                <use xlink:href="#icon-ren"></use>
                            </svg>
                        </div>
                        <div class="two">
                            <p>英雄改动</p>
                            <span>共10个</span>
                        </div>
                    </li>
                    <li>
                        <div class="one">
                            <svg class="icon gaidong" aria-hidden="true">
                                <use xlink:href="#icon-tubiaozhizuomoban"></use>
                            </svg>
                        </div>
                        <div class="two">
                            <p>皮肤改动</p>
                            <span>共19个</span>
                        </div>
                    </li>
                    <li>
                        <div class="one">
                            <svg class="icon gaidong" aria-hidden="true">
                                <use xlink:href="#icon-pen"></use>
                            </svg>
                        </div>
                        <div class="two">
                            <p>装备改动</p>
                            <span>共10个</span>
                        </div>
                    </li>
                    <li>
                        <div class="one">
                            <svg class="icon gaidong" aria-hidden="true">
                                <use xlink:href="#icon-icon-"></use>
                            </svg>
                        </div>
                        <div class="two">
                            <p>系统改动</p>
                            <span>共10个</span>
                        </div>
                    </li>
                    <li>
                        <div class="one">
                            <svg class="icon gaidong" aria-hidden="true">
                                <use xlink:href="#icon-L"></use>
                            </svg>
                        </div>
                        <div class="two">
                            <p>其他改动</p>
                            <span>共10个</span>
                        </div>
                    </li>
                </ul>
            </div>
            
        </div>
        <div class="bottom_navi">
            <ul>
                <li class="bcurr">
                    <div class="tubiao">
                        <span class="iconfont icon-zixun"></span>
                    </div>
                    <div class="naviText">资讯</div>                   
                </li>
                <li>
                    <div class="tubiao">
                        <span class="iconfont icon-pengyou"></span>
                    </div>
                    <div class="naviText">盟友圈</div>                   
                </li>
                <li>
                    <a href="./friends.html">
                        <div class="tubiao">
                            <span class="iconfont icon-xinfeng-copy"></span>
                        </div>
                        <div class="naviText">好友</div>   
                    </a>
                </li>
                <li>
                    <a href="./store.html">
                        <div class="tubiao">
                            <span class="iconfont icon-shangcheng"></span>
                        </div>
                        <div class="naviText">商城</div>    
                    </a>               
                </li>
                <li>
                    <a href="./guanli.html">
                        <div class="tubiao">
                            <span class="iconfont icon-woicon"></span>
                        </div>
                        <div class="naviText">我</div>  
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <script>
        let ul =document.querySelector(".navi_bottom ul");
        let li =ul.querySelectorAll("li");
        console.log(li);
        for(var i=0;i<ul.children.length;i++){
            li[i].addEventListener("click",function(){
                ul.querySelector(".curr").classList.remove("curr");
                this.classList.add("curr");
            });
        }
    </script>
    <script>
        let ul1 =document.querySelector(".bottom_navi ul");
        let li1 =ul1.querySelectorAll("li");
        for(var i=0;i<ul1.children.length;i++){
            li1[i].addEventListener("click",function(){
                ul1.querySelector(".bcurr").classList.remove("bcurr");
                this.classList.add("bcurr");
            });
        }
    </script>
    <script>
        let data=[
            {
                head: "开创神话！2021季前赛装备解读、全新版本解读",
                author:"英雄联盟赛事",
                about: "LOL",
                count: "1000",
                src :"../images/决赛.jpg"
            },
            {
                head: "女帝无双事件即将开启!",
                author:"英雄联盟赛事",
                about: "LOL",
                count: "3011",
                src :"../images/女帝无双.jpg"
            },
            {
                head: "星界诸神 集结成阵！",
                author:"英雄联盟赛事",
                about: "LOL",
                count: "1111",
                src :"../images/星神.jpg"
            },
            {
                head: "2021季前赛，巴德辅助出装符文全攻略",
                author:"英雄联盟赛事",
                about: "LOL",
                count: "999",
                src :"../images/s11巴德.jpg"
            }
        ];
        let list =document.querySelector(".list_ul");
        data.forEach((v,i)=>{
            let li=document.createElement("li");
            li.innerHTML=`<div>
                      <div class="li_head">
                        <h3>${v.head}</h3>
                      </div>
                      <div class="bottom">
                        <span>${v.about}</span>
                        <span>${v.author}</span>
                        <span>
                          <span class="iconfont icon-duihuakuang"></span>
                          ${v.count}
                        </span>
                      </div>
                    </div>
                    <img src="${v.src}">`;
            list.append(li);
        });
    </script>
    <script>
        let data1=[{src:"../images/星神.jpg"},
                {src:"../images/女帝无双.jpg"},
                {src:"../images/决赛.jpg"},
                {src:"../images/暗星奥丽安娜.jpg"},
                {src:"../images/星界赫卡里姆.jpg"}];
        let focus=document.querySelector(".focus ul");
        data1.forEach((v,i)=>{
            let li1=document.createElement("li");
            li1.innerHTML=`<img src="${v.src}">`;
            focus.append(li1);
        });
        
    </script>
    <script src="../js/lunbo.js"></script>
    <script src="../js/huadong.js"></script>
</body>
</html>